<template>
    <div class="isvip">
        <div style="width: 100%;border-bottom: 1px solid grey;">
            <div class="demo-input-suffix">
                <li> 会员名称：</li>
                <li>
                    <el-input
                            placeholder="请输入内容"
                            v-model="input"
                            size="mini"
                            clearable>
                    </el-input>
                </li>
            </div>
            <div class="vip-input">
                <li>
                    注册时间：
                </li>
                <li>
                    <el-input v-model="input1" placeholder="请输入内容" size="mini"></el-input>
                </li>
                <li> 至</li>
                <li>
                    <el-input v-model="input2" placeholder="请输入内容" size="mini"></el-input>
                </li>
                <li>
                    <el-button type="primary" size="medium " icon="el-icon-search" @click="sousuo">搜索</el-button>
                </li>
            </div>
        </div>
        <div class="vip-buuton">
            <li>
                <el-button type="primary" size="medium "  @click="typeof1">购物记录
                </el-button>
            </li>
            <li>
                <el-button type="info" size="medium "  @click="fukuan">付款记录</el-button>
            </li>

        </div>
        <el-dialog title="购买记录" :visible.sync="dialogFormVisible">
            <el-table
                    ref="singleTable"
                    :data="gouwu"
                    highlight-current-row
                    border
                    @current-change="handleCurrentChange"
                    style="width: 100%">
                <el-table-column
                        type="index"
                        label="序号"
                        width="50">
                </el-table-column>
                <el-table-column
                        prop="gouwu"
                        label="购物记录">
                </el-table-column>

            </el-table>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false" style="width: 50px ;height: 30px;">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible=false" style="width: 50px ;height: 30px;">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog title="付款记录" :visible.sync="dialogFormVisible1">
            <el-table
                    ref="singleTable"
                    :data="fukuan1"
                    highlight-current-row
                    border
                    @current-change="handleCurrentChange"
                    style="width: 100%">
                <el-table-column
                        type="index"
                        label="序号"
                        width="50">
                </el-table-column>
                <el-table-column
                        prop="fukuan"
                        label="付款记录">
                </el-table-column>

            </el-table>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible1 = false" style="width: 50px ;height: 30px;">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible1 = false" style="width: 50px ;height: 30px;">确 定</el-button>
            </div>

        </el-dialog>
        <div>
            <el-table
                    ref="multipleTable"
                    :data="tableData"
                    tooltip-effect="dark"
                    style="width: 100%"
                    border
                    @selection-change="handleSelectionChange">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        prop="username"
                        label="用户名"
                >
                </el-table-column>
                <el-table-column
                        prop="truename"
                        label="姓名"
                >
                </el-table-column>
                <el-table-column
                        prop="sex"
                        label="性别">
                </el-table-column>
                <el-table-column
                        prop="mobilephone"
                        label="电话">
                </el-table-column>
                <el-table-column
                        prop="level"
                        label="等级">
                </el-table-column>
                <el-table-column
                        prop="buyContent"
                        label="购买记录">
                </el-table-column>
                <el-table-column
                        prop="payContent"
                        label="付款记录">
                </el-table-column>
            </el-table>
        </div>
        <div>
            <div class="block">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page.sync="currentPage3"
                        :page-size="5"
                        layout="prev, pager, next, jumper"
                        :total="count">
                </el-pagination>
            </div>
        </div>
        <el-dialog title="搜索信息" :visible.sync="dialogTableVisible" width="70%">
            <el-table :data="gridData">
                <el-table-column property="username" label="用户名" ></el-table-column>
                <el-table-column property="truename" label="姓名" ></el-table-column>
                <el-table-column property="sex" label="性别"></el-table-column>
                <el-table-column property="mobilephone" label="电话"></el-table-column>
                <el-table-column property="email" label="邮箱"></el-table-column>
                <el-table-column property="address" label="地址"></el-table-column>
                <el-table-column property="level" label="会员等级"></el-table-column>
                <el-table-column property="buyContent" label="购买记录"></el-table-column>
                <el-table-column property="payContent" label="付款记录"></el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>
<script>
    export default {
        name: "isLog",
        data() {
            return {
                currentPage3:1,
                input: '',
                input1: '',
                input2: '',
                dialogTableVisible: false,
                dialogFormVisible: false,
                form: {
                    name: '',//用户名
                    ursename: '',//真实姓名
                    phone: '',//电话
                    state: '',//状态
                    sex: '',////心别
                    mailbox: '',//邮箱
                    isclass: '',//会员等级
                    desc: ''
                },
                formLabelWidth: '120px',
                dialogTableVisible1: false,
                dialogFormVisible1: false,
                form1: {
                    name: '',//用户名
                    ursename: '',//真实姓名
                    phone: '',//电话
                    state: '',//状态
                    sex: '',////心别
                    mailbox: '',//邮箱
                    isclass: '',//会员等级
                    desc: ''
                },
                tableData:[],
                currentPage4: 10,
                kong:[],
                count:0,
                value2:5,
                gouwu:[],
                fukuan1:[],
                gridData:[]
            }
        },
        methods: {
            typeof1(){
                let that=this
                console.log(that.kong)
                if (that.kong.length!==1){
                    alert('只能勾选一个')
                    this.dialogFormVisible=false
                } else {

                    this.dialogFormVisible=true
                    this.$axios.post('/api/Member/getOnlyRecords',{
                        page:1,
                        limit:5,
                        id:2,
                        type:2
                    }).then(res=>{
                        console.log(res)
                        this.gouwu=res.data.datas
                    })
                }
            },
            fukuan(){
                let that=this
                if (that.kong.length!==1){
                    alert('只能选中一个')
                    this.dialogFormVisible1=false
                } else {
                this.dialogFormVisible1=true
                this.$axios.post('/api/Member/getOnlyRecords',{
                    page:1,
                    limit:5,
                    id:2,
                    type:2
                }).then(res=>{
                    console.log(res)
                    this.fukuan1=res.data.datas
                })}
            },
            sousuo(){
                //搜索
                this.dialogTableVisible=true
                this.$axios.post('/api/Member/searchUserRecords',
                    {
                        username:this.input,
                        starttime:this.input1,
                        endtime:this.input2,
                        page:1,
                        limit:20
                }).then(res=>{
                    console.log(res)
                    this.gridData=res.data.datas
                    let data=res.data.datas
                    console.log(this.gridData)
                    for (let i=0;i<data.length;i++){
                        if (data[i].level===0){
                            this.gridData[i].level='普通用户'
                        } else if (data[i].level===1){
                            this.gridData[i].level='会员1级'
                        }  else if (data[i].level===2){
                            this.gridData[i].level='会员2级'
                        } else if (data[i].level===3){
                            this. gridData[i].level='会员3级'
                        } else if (data[i].level===4){
                            this.gridData[i].level='会员4级'
                        } else if (data[i].level===5){
                            this. gridData[i].level='会员5级'
                        }
                    }
                    for ( let j=0;j<data.length;j++){
                        if (data[j].payContent==null){
                            this.gridData[j].payContent='无付款记录'
                        }
                    }
                    for ( let j=0;j<data.length;j++){
                        if (data[j].buyContent==null){
                            this.gridData[j].buyContent='无购买记录'
                        }
                    }

                }).catch(res=>{
                    console.log(res)
                })
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.$axios.get('/api/Member/getAllUserRecords', {
                    params: {
                        page: val,
                        limit: this.value2
                    }
                }).then(res=>{
                    this.tableData=res.data.datas
                    let data = res.data.datas
                    console.log(this.tableData)
                    for (let i=0;i<data.length;i++){
                        if (data[i].buyContent==null){
                            data[i].buyContent='无购买记录'
                        }
                    }
                    for (let i=0;i<data.length;i++){
                        if (data[i].payContent==null){
                            data[i].payContent='无付款记录'
                        }
                    }
                    for (let i = 0; i < data.length; i++) {
                        let level1 = res.data.datas
                        if (level1[i].level === 0) {
                            level1[i].level = '普通用户'

                        } else if (level1[i].level === 1) {
                            level1[i].level = '会员1级'
                        } else if (level1[i].level === 2) {
                            level1[i].level = '会员2级'
                        } else if (level1[i].level === 3) {
                            level1[i].level = '会员3级'
                        } else if (level1[i].level === 4) {
                            level1[i].level = '会员4级'
                        } else if (level1[i].level === 5) {
                            level1[i].level = '会员5级'
                        }}
                })

            },
            handleSelectionChange(val){
                this.kong=val
            }
        },
        created() {
            this.$axios.get('/api/Member/getAllUserRecords',{
                params:{
                    page:1,
                    limit:5
                }
            }).then(res=>{
                this.count=res.data.count
                this.tableData=res.data.datas
                let data = res.data.datas
                for (let i=0;i<data.length;i++){
                    if (data[i].buyContent==null){
                        data[i].buyContent='无购买记录'
                    }
                }
                for (let i=0;i<data.length;i++){
                    if (data[i].payContent==null){
                        data[i].payContent='无付款记录'
                    }
                }
                for (let i = 0; i < data.length; i++) {
                    let level1 = res.data.datas
                    if (level1[i].level === 0) {
                        level1[i].level = '普通用户'

                    } else if (level1[i].level === 1) {
                        level1[i].level = '会员1级'
                    } else if (level1[i].level === 2) {
                        level1[i].level = '会员2级'
                    } else if (level1[i].level === 3) {
                        level1[i].level = '会员3级'
                    } else if (level1[i].level === 4) {
                        level1[i].level = '会员4级'
                    } else if (level1[i].level === 5) {
                        level1[i].level = '会员5级'
                    }}
            }).catch(res=>{
            })
        }
    }
</script>

<style scoped>
    * {
        margin: 0;
        padding: 0;
        list-style-type: none;
    }

    .isvip {
        width: 1000px;
        border: 1px solid grey;
        margin: 0 auto;
        /*overflow: hidden;*/
    }

    .demo-input-suffix {
        width: 30%;
        height: 50px;
        line-height: 50px;
        margin-left: 60px;
        float: left;

    }

    .demo-input-suffix li:nth-child(1) {
        width: 80px;
        color: grey;
        font-size: 14px;
        float: left;
    }

    .demo-input-suffix li:nth-child(2) {
        width: 150px;
        float: left;
    }

    .vip-input {
        width: 50%;
        height: 50px;
        line-height: 50px;
        margin-left: 50%;
    }

    .vip-input li {
        float: left;
        color: grey;
        font-size: 14px;
    }

    .vip-input li:nth-child(2),
    .vip-input li:nth-child(4) {
        width: 150px;
    }

    .vip-input li:nth-child(5) button {
        width: 80px;
        height: 30px;
        padding: 5px 5px;
        line-height: 20px;
        margin-top: 10px;
        margin-left: 20px;
    }

    .vip-buuton {
        width: 100%;
        height: 50px;
        text-align: center;
    }

    .vip-buuton li {
        width: 10%;
        height: 50px;
        line-height: 50px;
        float: left;
    }

    .vip-buuton li button {
        width: 80px;
        height: 30px;
    }

    .form-button {
        width: 90%;
        margin-top: 10px;
    }
    .block{
        margin-top: 20px;
        margin-left: 200px;
    }
</style>